<!doctype html>
<html>
    <head>
      <meta charset="utf-8">
      <title>无标题文档</title>
      <style type="text/css">
	    #father{ border:1px solid #000; width:320px; height:320px;
		         position:relative; left:1px; top:1px;
		   }
        .aa{ border:1px solid #F00; width:100px; height:100px;
		position:relative; top:-310px; left:8px; background-color:#F3F; text-align:center; line-height:100px;
			}
		.bb{ border:1px solid #F00; width:100px; height:100px;
		position:relative; top:-412px; left:210px; background-color:#F3F;text-align:center; line-height:100px;
			}
		.cc{ border:1px solid #F00; width:100px; height:100px;
		position:relative; top:-311px;  left:8px; background-color:#F3F;text-align:center; line-height:100px;
			}
		.dd{ border:1px solid #F00; width:100px; height:100px;
		position:relative;top:-414px; left:210px; background-color:#F3F;text-align:center; line-height:100px;
			}
		.ee{ border:1px solid #F00; width:100px; height:100px;
		position:relative; top:-617px;  left:109px; background-color:#F3F;text-align:center; line-height:100px;
			}
	    a:hover .aa{ background-color:#36F;  
			}
		a:hover .bb{ background-color:#36F;  
			}
		a:hover .cc{ background-color:#36F;  
			}
		a:hover .dd{ background-color:#36F;  
			}
		a:hover .ee{ background-color:#36F;  
			}
		a{ text-decoration:none;
		
			}
      </style>
    </head>
    
    <body>
     <div id="father">
       </div>
       <a href="#"><div class="aa"><span id="tt">链接1</span></div></a>
       <a href="#"><div class="bb"><span id="tt">链接2</span></div></a>
       <a href="#"><div class="cc"><span id="tt">链接3</span></div></a>
       <a href="#"><div class="dd"><span id="tt">链接4</span></div></a>
       <a href="#"><div class="ee"><span id="tt">链接5</span></div></a>
    </body>
</html>
